var btn = document.querySelector('#btn');
var box = document.querySelector('.hint');
var hint = document.querySelector('ul');
var add = document.querySelector('#add');
var inputs = document.querySelectorAll('input');
var userlist = document.querySelector('.userlist');

btn.onclick = function(){
    box.style.display = 'block';
}
box.onclick = (e)=>{
    box.style.display = 'none';
}
hint.onclick = (e)=>{
    e = e || window.event;
    e.stopPropagation();
}
// 点击添加按钮
add.onclick = ()=>{
    //向服务器端 发起请求 /api/add
    axios.get("/api/add", { params: { email:inputs[1].value,name:inputs[2].value,phone:inputs[3].value   } } ).then((res)=>{
        
        console.log('服务端返回的数据',res.data.userlist);
        //获取到最新的 服务端 返回的所有用户数据,
        //重新渲染用户列表
        render( res.data.userlist );
        //隐藏模态框
        box.style.display = "none";
    })
    
}


function render( userlist ){
    // var tr = document.createElement('tr');
    // table.appendChild(tr);
    // tr.class = 'list';
    var str = userlist.map((item,index)=>{
        
        return `<tr>
                    <td>${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>编辑2</td>
                    <td>是</td>
                    <td><span>正常</span></td>
                    <td>
                        <span class = "deleteicon" id = "${item.id}" class = "iconfont icon-lajixiang">删除</span>
                       
                    </td>
                </tr>`;
    }).join("")

    document.querySelector('.userlist').innerHTML = str;
}

//向服务器端 发起请求 /api/list , 获取服务端现有的所有用户数据
axios.get("/api/list").then((res)=>{
        
    //获取到最新的 服务端 返回的所有用户数据,
    console.log('服务端返回的数据',res.data);
    
    //重新渲染用户列表
    render( res.data );
})
userlist.onclick = (e) => {
    e = e || window.event;
    var ele = e.target || e.srcElement;
    if( ele.nodeName = 'SPAN' && ele.className == "deleteicon" ){
        // console.log('点了删除');
        axios.get("/api/delete",{ params : { id: ele.id } }).then((res) => {
            console.log('服务器返回数据',res.data.userlist)
            render( res.data.userlist );
        })
    }
}